<template>
  <div class="add">
    <!-- 添加打印机 -->
    <a-modal v-model:open="props.addVisible" okText="确定" cancelText="取消" @cancel="addCancel" @ok="submit" :destroyOnClose="true"
      :centered="true" title="添加打印机">
      <div class="modal_content_add">
        <a-form ref="formRef" :model="addState.addForm" :rules="addState.rules" :label-col="{ span: 7 }"
          :wrapper-col="{ span: 14 }">
          <a-form-item label="选择打印机" name="fid">
            <a-select v-model:value="addState.addForm.fid" placeholder="请选择打印机" @change="handleChange">
              <a-select-option :value="item.fid" v-for="item in addState.printList" :key="item.name">{{ item.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="是否启用" name="isInternetPrint">
            <a-radio-group v-model:value="addState.addForm.isInternetPrint">
              <a-radio value="1">启用</a-radio>
              <a-radio value="2">禁用</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item ref="name" label="位置" name="printerPosition">
            <a-input placeholder="请输入打印机位置,限制两百个字符" v-model:value="addState.addForm.printerPosition" />
          </a-form-item>
          <a-form-item label="图标" name="printerIcon">
            <a-select v-model:value="addState.addForm.printerIcon" placeholder="请选择图标">
              <a-select-option :value="0">立式</a-select-option>
              <a-select-option :value="1">台式</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="备注" name="remark">
            <a-textarea v-model:value="addState.addForm.remark" placeholder="限制两百个字符" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, watch } from 'vue'
import { rules } from './column'
import { randomRange } from '@renderer/utils/index'
// 引入模块
import { message } from 'ant-design-vue'
import { SearchOutlined, DownOutlined } from '@ant-design/icons-vue'
import api from '@renderer/api/print'
const userInfo = ref(null)
const props = defineProps({
  addVisible: {
    type: Boolean,
    required: true
  }
})
const emit = defineEmits(['trigger-parent'])
const addState = reactive({
  rules,
  addForm: {
    printerName: '',
    fid:'',
    isInternetPrint: '1',
    printerPosition: '',
    printerIcon: 0,
    remark: ''
  },
  printList: []
})
const addCancel = () => {
  emit('trigger-parent', 'set-visible', false)
}
const formRef = ref();
const submit = async () => {
  formRef.value
    .validate()
    .then(async () => {
      window.api
        .fetchData(
          api.addPrinter(
            JSON.parse(
              JSON.stringify({ ...addState.addForm, printStationId: userInfo.value.printStationId })
            )
          )
        )
        .then((res) => {
          if (res.code === 200) {
            message.success(res.msg)
            formRef.value.resetFields()
            emit('trigger-parent', 'set-visible', false)
            emit('trigger-parent', 'seach')
          } else {
            message.error(res.data)
          }
        }
        )
    })
    .catch(error => {
      console.log('error', error);
    });
}
const handleChange = (e) => {
  const find = addState.printList.find(item => item.fid === e)
  addState.addForm.printerName = find.name
}

onMounted(async () => {
  userInfo.value = await window.api.getStoreData('user-info')
});
watch(
  () => props.addVisible,
  async (newValue) => {  // 回调函数
    // 数据变化时执行的操作
    if (newValue) {
      let list = await window.api.getPrinterList()
      addState.printList = list.map(item => {
        return {
          ...item,
          fid: item.options['device-uri']
        }
      })
    }
  }
)
</script>

<style lang="scss" scope>
@use './index.scss' as vars;
</style>
